<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>

 

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
    <script type="text/javascript">

    // 分页查询
    queryList = function(pageNum){
        // 读取mName
        let mName = $("input[name='mName']").val().trim();
        if(mName === undefined)
            mName = "";
        layer.load(0)
        $.ajax({
            type: "GET",
            url: origin + "/menu/list",
            data: {pageNum:pageNum,pageSize:globalPageSize,mName:mName,jwtToken:jwtToken},
			xhrFields: {
			   withCredentials: true
			},
			crossDomain: true,
            success: function (data) {
                layer.closeAll();
                if(data.code === 200){
                    // 更新全局分页参数
                    globalPageSize = data.obj.pageSize;
                    globalPageNum = data.obj.pageNum;
                    // 填充分页
                    fillPageData(data.obj);
                    // 填充内容
                    fillContent(data.obj);
                    $("#checkall").removeAttr("checked");
                }else{
                    layer.msg(data.msg,function(){})
                }
            },
            complete : function(xhr, status) {
                myComplete(xhr, status);
            }
        });
    }

    $(function () {
        // 分页查询
        queryList(globalPageNum);
        // 添加资源
        $('#newNav').click(function(){
            window.location.href="add.html?pageNum=" + globalPageNum + "&pageSize=" + globalPageSize;
        });
        // 监听查询按钮
        $("#queryByMName").on("click", function(){
            queryList(globalPageNum);
        })
    });
    function fillContent(obj){
        let list = obj.list;
        // 清空div
        $("#mycon").empty();
        $.each(list, function(){
            let mState = this.mState==0 ? "有效" : "失效";
            let conbox = "<tr>\n" +
                "     \t<td style=\"vertical-align:middle;\"><input type=\"checkbox\" name=\"check\" value=\""+this.mId+"\"></td>\n" +
                "        <td>"+ this.mName +"</td>\n" +
                "        <td style='max-width:750px;overflow:hidden;'>"+ this.mUrl +"</td>\n" +
                "        <td>"+ mState +"</td>\n" +
                "        <td>\n" +
                "            <a href=\"edit.html?pageSize="+obj.pageSize+"&pageNum="+obj.pageNum+"&mId="+this.mId+"\">编辑</a>&nbsp;&nbsp;&nbsp;<a href=\"javascript:deleteOne("+this.mId+");\">删除</a>\n" +
                "        </td>\n" +
                "    </tr>\t";
            $("#mycon").append($(conbox));
        })
    }

    // 删除一个资源信息
    function deleteOne(mId){
        if(confirm("确认删除?")){
            layer.load(0);
            $.ajax({
                type: "POST",
                url: origin + "/menu/"+ mId,
                data: {_method:"DELETE",jwtToken:jwtToken},
				xhrFields: {
				   withCredentials: true
				},
				crossDomain: true,
                success: function (data) {
                    layer.closeAll();
                    if(data.code === 204){
                        layer.msg("删除成功");
                        queryList($(".current").text())     // 刷新页面
                    }else{
                        layer.msg(data.msg,function(){})
                    }
                }
                ,complete : function(xhr, status) {
                    myComplete(xhr, status);
                }
            });
        }
    }

    function checkall(){
        var alls=document.getElementsByName("check");
        var ch=document.getElementById("checkall");
        if(ch.checked){
            for(var i=0;i<alls.length;i++){
                alls[i].checked=true;
            }
        }else{
            for(var i=0;i<alls.length;i++){
                alls[i].checked=false;
            }
        }
    }
    function delAll(){
        var alls=document.getElementsByName("check");
        var ids=new Array();
        for(var i=0;i<alls.length;i++){
            if(alls[i].checked){
                ids.push(alls[i].value);
            }
        }
        if(ids.length>0){
            if(confirm("确认删除?")){
                layer.load(0);
                $.each(ids, function(index,id){
                    $.ajax({
                        type: "POST",
                        url: origin + "/menu/"+ id,
                        data: {_method:"DELETE",jwtToken:jwtToken},
						xhrFields: {
						   withCredentials: true
						},
						crossDomain: true,
                        success: function (data) {
                            layer.closeAll();
                            if(data.code === 204){
                                if(index === ids.length-1){
                                    layer.msg("删除成功");
                                    queryList($(".current").text())     // 刷新页面
                                }
                            }else{
                                layer.msg(data.msg,function(){})
                            }
                        }
                        // TODO: 后端拦截ajax请求进行登陆跳转需要前端相互配合, 每一个ajax请求都需要加上以下的代码
                        ,complete : function(xhr, status) {
                            myComplete(xhr, status);
                        }
                    });
                })
                return false;
            }
        }else{
            alert("请选中要删除的项");
        }
    }
</script>
</head>
<body>
<form class="form-inline definewidth m20">
    资源(菜单)名称：
    <input type="text" name="mName" class="abc input-default" placeholder="" value="">&nbsp;&nbsp;
    <button type="button" id="queryByMName" class="btn btn-primary">查询</button>
</form>
<table class="table table-bordered table-hover definewidth m10">
    <thead>
    <tr>
    	<th width="5%"><input type="checkbox" id="checkall" onChange="checkall();"></th>
        <th>资源名称</th>
        <th>路径Url</th>
        <th>是否有效</th>
        <th  width="10%">操作</th>
    </tr>
    </thead>
    <tbody id="mycon"></tbody>

</table>
<table class="table table-bordered table-hover definewidth m10" >
  	<tr>
        <th colspan="5">
            <div id="pageInfo-box" class="inline pull-right page"></div>
            <div><button type="button" class="btn btn-success" id="newNav">添加资源</button>&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-success" id="delPro" onClick="delAll();">删除选中</button></div>
        </th>
    </tr>
</table>
</body>
</html>